<template>
    <div class="content">
        <div class="main-info">
            <el-card class="info">
                <el-button type="primary" icon="el-icon-user-solid" round="true"></el-button>
                <h2 class="num-info">18547632</h2>
                <p class="desc">用户总数</p>
            </el-card>
            <el-card class="info">
                <el-button type="success" icon="el-icon-s-data" round="true"></el-button>
                <h2 class="num-info">66789</h2>
                <p class="desc">总课程数</p>
            </el-card>
            <el-card class="info">
                <el-button type="danger" icon="el-icon-coin" round="true"></el-button>
                <h2 class="num-info">17862</h2>
                <p class="desc">总订单数</p>
            </el-card>
            <el-card class="info">
                <el-button type="warning" icon="el-icon-data-line" round="true"></el-button>
                <h2 class="num-info">990989.00</h2>
                <p class="desc">总收入</p>
            </el-card>
        </div>

        <div class="chart">
            <el-card class="e-chart" id="echart1"></el-card>
            <el-card class="e-chart" id="echart2"></el-card>
        </div>
    </div>
</template>


<script>

export default{
    data(){
        return{
            initData:{}
        }
    },

    create(){
        this.initData()
    },

    methods:{
        async initData(){
            const result = await this.$axios.get('/manage/init')
            if(result.data.success){
                Object.assign(this.initData, result.data.message)
            }else{
                this.$message.error(result.data.message)
            }
        },

        //配置图表
        setChart1(){
            const myChart = this.$echarts.init(document.getElementById("echart1"))
            myChart.setOption({
                tooltip: {},
                legend: {
                data: ["课程销量"],
                },
                xAxis: {
                    data: [
                        "spring",
                        "redis",
                        "vue3",
                        "k8s全能",
                        "大屏方案",
                        "全栈开发",
                    ],
                },
                yAxis: {},
                series: [
                    {
                        name: "课程销量",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            })
        },

        setChart2(){
            const myChart = this.$echarts.init(document.getElementById("echart2"))
            myChart.setOption({
                legend: {
                    data: ["用户增长情况"],
                },
                xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "用户增长情况",
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: "line"
                    }
                ],
            })
        },

        setChartPie(){
            const myChart = this.$echarts.init(document.getElementById("echartPie"))
            myChart.setOption({
                type: 'pie',
            data: [
                    {
                    value: 335,
                    name: '直接访问'
                    },
                    {
                    value: 234,
                    name: '联盟广告'
                    },
                    {
                    value: 1548,
                    name: '搜索引擎'
                    }
                ]
            })
        }
    },

    mounted(){
        this.setChart1()
        this.setChart2()
        this.setChartPie()
    }

    
}
</script>


<style scoped>
.content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main-info {
  flex: 1;
  display: flex;
  justify-content: space-around;
  background: white;
  min-width: 800px;
  border-radius: 8px;
}

.info {
  background: white;
  width: 18%;
  height: 60%;
  align-self: center;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info .num-info {
  margin: 10px 0px;
}
.info .desc {
  font-size: 10px;
  color: gray;
}


.chart {
  flex: 1;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

.e-chart {
  padding-top: 20px;
  width: 49%;
  height: auto;
  min-width: 500px;
}

.e-chart-pie{
    flex: 1;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}


</style>